<template>
  <p-spin :spinning="confirmLoading">
    <ul>
      <div class="box1">
        <span class="title">| 工序工单列表</span>
        <a @click="refresh">刷新</a>
      </div>

      <li
        v-for="(item, idx) in data"
        :key="idx"
        @click="focus(item)"
        :class="{ active: currentItem && currentItem.id === item.id }"
      >
        <div>
          <p>{{ item.productcode }}</p>
          <p>{{ item.productname }}</p>
        </div>
        <div>
          <p>{{ item.processBillNo }}</p>
          <p>{{ changeTime(item.starttime) }}</p>
        </div>
        <p-button type="primary">开工</p-button>
      </li>
    </ul>
  </p-spin>
</template>

<script>
import { postAction, getAction, deleteAction, httpAction } from "@/api/manage";
export default {
  name: "",
  data() {
    return {
      url: {
        list: "/mes-manufacture/mfStartWork/getProcessbillNoList", //获得工序工单列表
      },
      data: [],
      confirmLoading: true,
      currentItem: null,
    };
  },
  mounted() {
    this.getProcessList();
  },
  methods: {
    getProcessList() {
      getAction(this.url.list, {}).then((res) => {
        if (res.success) {
          this.data = res.data;
          this.confirmLoading = false;
        }
      });
    },
    focus(item) {
      this.currentItem = item;
      this.$emit("on-item-click", item);
    },
    refresh() {
      this.data = [];
      this.confirmLoading = true;
      this.getProcessList();
    },
    changeTime(s) {
      let data = new Date(s);
      Date.prototype.toLocaleString = function () {
        return (
          this.getFullYear() +
          "/" +
          (this.getMonth() + 1) +
          "/" +
          this.getDate()
        );
      };
      return data.toLocaleString();
    },
  },
};
</script>

<style scoped>
.poros-spin-nested-loading {
  height: 100%;
  border: 1px solid #ecedf0;
  overflow: auto;
}
.poros-spin-container {
  height: 100%;
}
ul {
  padding: 10px 20px;
}
.title {
  font-size: 16px;
  font-weight: 800;
  height: 40px;
}
.list {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.box1 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
ul a {
  line-height: 40px;
}
.list {
  margin: 5px 0;
  padding: 10px 10px;
  font-weight: 600;
  border: 1px solid #eee;
  cursor: pointer;
}
.list:hover {
  background: #eee;
}
.list p {
  width: 100px;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  font-size: 13px;
}
.active {
  background: #eee;
}
</style>
